<template>
  <div>
    <el-dialog class="dialog" :visible.sync="visible" :width="width" :modal-append-to-body="false" :show-close="true"
      :close-on-click-modal="false" :before-close="hide" :style="{ '--el-dialog-height': height }">
      <template slot="title">
        <div class="close" @click="hide"></div>
        <div class="dialog-header">
          <div class="header-title">{{ '记录' }}</div>
        </div>
      </template>
      <div class="dialog-body">
        <div class="form-box">
        </div>
        <div class="table-box">
          <el-table v-loading="dataLoading" :data="tableData" :style="{width: '100%'}" height="100%">
            <el-table-column v-for="item in tableColumn" :key="item.prop" :label="item.label" :prop="item.prop"
              :class-name="item.className" :width="item.width" :min-width="item.minWidth" :sortable="item.sortable"
              :align="item.align || 'center'" :show-overflow-tooltip="item.showOverflowTooltip" :fixed="item.fixed"
              :resizable="false">
            </el-table-column>
          </el-table>
        </div>
        <pagination :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize" @pagination="getData" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getFileNameFromURL } from '@/utils/index.js';
import * as api from '@/api/activityManger/index.js';
import * as fileApi from '@/api/file/index.js';

export default {
  name: 'ActivityRecordDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: '80%',
    },
    height: {
      type: String,
      default: '80%',
    },
  },
  data() {
    return {
      dataLoading: false,
      total: 0, // 总条数
      defaultTableColumn: [
        { label: '姓名', prop: 'nickName', minWidth: 120 },
        // { label: '封面', prop: 'activityImage', minWidth: 120 },
        // { label: '操作', prop: 'handle', minWidth: 100 },
        { label: '投票时间', prop: 'createTime', minWidth: 150 },
        // { label: '结束时间', prop: 'endTime', minWidth: 150 },
        // { label: '描述', prop: 'description', minWidth: 500, showOverflowTooltip: true },
        // { label: '添加时间', prop: 'firstAddTime', minWidth: 150 },
      ],
      tableColumn: [],
      tableData: [], // 表格数据
      // 查询参数
      form: { pageNum: 1, pageSize: 10, activityName: '' },
      formRules: {
        activityName: [{ required: true, trigger: 'blur', message: '请输入名称' }],
        startTime: [{ required: true, trigger: 'blur', message: '请选择名称' }],
        description: [{ required: true, trigger: 'blur', message: '请输入描述' }],
      },
    };
  },
  watch: {
    visible: {
      handler(value) {
        if (value) {
          this.form = this.getForm();
          this.tableColumn = this.defaultTableColumn;
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    hide() {
      this.resetForm();
      this.$emit('update:visible', false);
    },
    // 获取活动列表
    getData() {
      if (!this.params.activityId) return;
      this.dataLoading = true;
      api.getActivityRecordList({ activityId: this.params.activityId }).then((res) => {
        // 根据选项设置表头
        if (res.rows[0]) {
          const options = JSON.parse(res.rows[0]?.options);
          const optionColumn = options.map((option) => {
            return { label: option.title, prop: option.field };
          });
          this.tableColumn = [...this.tableColumn, ...optionColumn];
        }

        // 根据选项处理列表数据
        res.rows.forEach((item) => {
          const options = JSON.parse(item?.options);
          options.forEach((option) => {
            if (Array.isArray(option.value)) item[option.field] = option.value.join('，');
            else item[option.field] = option.value;
          });
        });
        this.tableData = res.rows;
        this.total = res.total;
        this.dataLoading = false;
      });
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getData();
    },
    getForm() {
      let form = {
        pageNum: 1,
        pageSize: 10,
        activityName: '',
        activityTypeId: this.params.activityTypeId,
      };
      return form;
    },
    resetForm() {
      this.form = this.getForm();
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/dialog.scss';
// @import '@/assets/styles/mixin.scss';

// ::v-deep .el-dialog__body {
//   height: 100% !important;
// }

.dialog-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.table-box {
  flex: 1;
}
</style>
